<template>
	<view id="getNumber" class="getNumber" >
		<view class="model">
			<view class="model-view">
				<i class="iconfont icon-searchclose" @click="closeModel" />
				<image class="logo" :src="configObj.logo" mode="widthFix"></image> 
				<view class="logoTitle">
					请绑定手机
					<p class="">以便我们为您提供更好的服务</p>
				</view>
				<button class="bindClass" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					<!-- <image :src="imgUrl+'weixin.png'"></image> -->
					<span>快捷绑定手机号</span>
				</button>
				<view class="loginmethod">
					<!-- #ifdef MP-WEIXIN -->
						<view class="loginmethodT1" @click="goHome()">游客登录</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		name:'getNumber',
		data(){
			return{
				imgUrl:this.$apiFun.imgUrl,
				session_key:'',
			}
		},
		computed:{
			//login_status 0 未登录 、1临时微信登录 2已登录
			...mapGetters([
				'configObj',
			])
		},
		async mounted () {
			const code = await this.xcxlogin()	
			const {session_key} = await this.GetSessionKeyOrOpenIdApiFun(code)
			this.session_key = session_key
		},
		methods:{
			// 授权用户手机号
			getPhoneNumber(e) {
				var that= this
				console.log(e)
				uni.login({
				  provider: 'weixin',
				  success: function (res) {
					  let encryptedData =  e.detail.encryptedData
					  let iv = e.detail.iv
					  if(e.detail.errMsg =="getPhoneNumber:ok"){
					  	that.logins(encryptedData,iv)
					  }else{
					  	uni.showToast({
					  		title: '请重新获取',
					  		icon: "none"
					  	})
					  }
				  },
				})
			},
			// 获取小程序 
			GetSessionKeyOrOpenIdApiFun(code){
				const that = this
				let param = {
					code:code
				}
				return new Promise((resove)=>{
					that.$apiFun.postApi(that.$api.GetSessionKeyOrOpenIdApi,param,function(res){
							if(res.code ==200){
								resove(res.data)
							}				
						},function(err){
					});
				})
			},
			logins(encryptedData,iv) {
				const that = this
				let param = {
					encrypteData: encryptedData,
					iv: iv,
					sessionKey:this.session_key
				}
				uni.hideLoading()
				that.$apiFun.postApi(that.$api.getPhoneNumberApi,param,function(res){
						if(res.code ==200){
							uni.showToast({
								title: '授权成功',
								icon: "none"
							})
							that.$store.dispatch('setLoginStatus',2)
							that.wxLoginUserInfoApiFun().then((resove)=>{
								if(!resove.isBind){
									// 跳转webView 获取用户的公众号opendid
									uni.navigateTo({
										url:'/webView/webView'
									})
								}else{
									uni.showToast({
										title:'登陆成功!',
										icon:'none'
									})
									that.loginSuccess()
								}
							})
						}				
					},function(err){
				});
			},
			xcxlogin(){
				return new Promise((resove,reject)=>{
					uni.login({
					  provider: 'weixin',
					  success: function (res) {
						  console.log('小程序code-------',res.code)
						  return resove(res.code)
					  },
					  fail: function (err) {
						  
						  reject()
						  console.log('----小程序err----->',err)
					  },
					});
				})
			},
			closeModel(){
				this.$emit('closeModel')
			},
			// 游客登录
			goHome(){
				// this.$store.dispatch('setLoginStatus',null)
				this.loginSuccess()
			},
			loginSuccess(){
				if(uni.getStorageSync('beforePage')){
					uni.reLaunch({
						url: uni.getStorageSync('beforePage'),
						success(){
							uni.removeStorageSync('beforePage')
						}
					})
				}else{
					uni.reLaunch({
						url: '/pages/Tabblock/uni_Home'
					})
				}
			},
			// 个人中心接口
			wxLoginUserInfoApiFun(){
				var that = this;
				const param = {}
				return new Promise((resove,reject)=>{
					that.$apiFun.getApi(that.$api.wxLoginUserInfoApi, param, function(res) {
						const {code,data} = res
						if (code == 200) {
							that.$store.dispatch('setUserInfos',data)
							resove(data)
						}
					}, function(err) {});
				})
			},
		}
	}
</script>
 
<style scoped lang="less">
	.getNumber{
		background:rgba(0,0,0,0.6);
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		.model{
			text-align: center;
			width: 100%;
			height: 60%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: white;
			border-top-right-radius: 15rpx;
			border-top-left-radius: 15rpx;
			.model-view{
				position: relative;
				.iconfont {
					position: absolute;
					right: 10rpx;
					top: 20rpx;
					font-size: 60rpx;
					z-index: 2;
				}
				.logo{
					width: 170rpx;
					height:170rpx;
					margin: 80rpx 0 50rpx 0;
				}
				.logoTitle{
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
					p{
						font-weight: 400;
					}
				}
				.bindClass {
					font-size: 35rpx;
					width:80%;
					background: #0cbc0b;
					color: white;
					margin: 60rpx auto 0;
					height: 85rpx;
					line-height: 85rpx;
					border-radius: 15rpx;
					image{
						display: inline-block;
						vertical-align: middle;
						width: 60rpx;
						height: 60rpx;
					}
					p{
						display: inline-block;
						vertical-align: middle;
					}
				}
				.loginmethodT1{
					margin-top: 20rpx;
					width: 100%;
					text-align: center;
					font-size: 26rpx;
					color: #333333;
				}
			}
			
		}
	}
</style>
